import React, { Component } from 'react'
import * as echarts from 'echarts';
import { Modal, Form, Input, Button  } from 'antd';
import axios from "axios"
const Style = {
    "width":"100%",
    "height":"100%"

}

class Chart extends Component {
  state = {
      arr:[],
      obj:{
        xAxis: {
          type: 'category',
          data: ['星期1', '星期2', '星期3', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [10, 20, 150, 80, 70, 110, 130],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      },
      obj1:{
        xAxis: {
          type: 'category',
          data: ['星期1', '星期2', '星期3', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [10, 20, 150, 80, 70, 110, 130],
            type: 'line',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      },
      isModalVisible:false
  }
  onFinish(values){
    console.log('Success:', values);
    // console.log("state",this.state.obj);
    // this.props.edit_data(values)
    this.setState({
      isModalVisible:false
    })
};
handleCancel(){
  this.setState({
    isModalVisible:false
  })
}
  componentDidMount(){
    let myChart1 = echarts.init(document.getElementById('linechart')); 
    let myChart = echarts.init(document.getElementById('mychart')); // 我可以往mychart里画东西了
    // mychart 就成了一个画布
    myChart.setOption(this.state.obj);
      myChart1.setOption(this.state.obj1)
     axios.get("/list").then(res=>{
         console.log(res.data)
         let arr1 = this.state.obj1
         console.log(arr1)
         arr1.series[0].data = res.data
         console.log(arr1)
         this.setState({
             obj1:arr1
         })
        
     })
   

  }
 
  render() {
    return (
      <div style={Style}>
        <button onClick={()=>{this.setState({isModalVisible:true})}}></button>
          <div id='mychart' style={{width:'400px',height:"250px"}}></div>
          <div id='linechart' style={{width:'400px',height:"250px"}}></div>
          <Modal footer={null}  forceRender = {true}  title="Basic Modal" visible={this.state.isModalVisible} onCancel={this.handleCancel.bind(this)}>
                    <Form
                        name="basic"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 16 }}
                        onFinish={this.onFinish.bind(this)}
      
                        autoComplete="off"
                        ref={(el=>this.my_form=el)}
                        form={this.my_form}
                        >
                      
                       

                        <Form.Item
                            label="age"
                            name="age"
                          
                        >
                            <Input />
                        </Form.Item>
                        
                        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                            <Button type="primary" htmlType="submit">
                            Submit
                            </Button>
                        </Form.Item>
                    </Form>
                </Modal>
      </div>
    )
  }
}

export default Chart